<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
    <script src="ol.js"></script>
    <link rel="stylesheet" href="ol.css" />

</head>
<body>
    <div id="map" style="width:800px;height:600px;border:1px solid black;"></div>
    <div>
        SDUI是脚本驱动用户界面(Script Driven User Interface)的缩写，这里指代外部传入PixelEngine的变量对象.<br>
        缓冲区半径:<input type="text" id="bufferwid" name="bufferwid" maxlength="8" size="10" value="5.0" /><br>
        缓冲区WKT:<br>
        <input type="text" id="wkt" name="wkt"  size="100" value="POINT(0 0)" /><br>
        <input type='button' onclick="onUpdateSdui()" value="更新" />
        <br>这里只是个Demo演示外部变量与脚本的交互，所以这里输入太长的WKT，因为不能通过URL传递太长的字符串。
    </div>
    <script>
const projection = ol.proj.get('EPSG:4326');
const projectionExtent = projection.getExtent();
const size = ol.extent.getWidth(projectionExtent) / 256;
const resolutions = new Array(19);
const matrixIds = new Array(19);
for (let z = 0; z < 19; ++z) {
  // generate resolutions and matrixIds arrays for this WMTS
  resolutions[z] = size / Math.pow(2, z);
  matrixIds[z] = z;
}
    const wmtsSource=new ol.source.WMTS({
                    attributions:'1',
                    url: 'http://localhost:8881/variable/wmts/',
                    layer: 'variable',
                    matrixSet: 'ms_14',
                    format: 'image/png',
                    projection: projection,
                    tileGrid: new ol.tilegrid.WMTS({
                        origin: ol.extent.getTopLeft(projectionExtent),
                        resolutions: resolutions,
                        matrixIds: matrixIds,
                    }),
                    style: 'default',
                    wrapX: false
                });
    const map = new ol.Map({
        target: 'map',
        layers: [
            
            new ol.layer.Tile({
                maxZoom: 14,
                source:wmtsSource,
            }),
    ],
        view: new ol.View({
        projection: 'EPSG:4326',
        center: [0, 0],
        zoom: 2,
        }),
    });
    function onUpdateSdui() {
        console.log("onUpdateSdui");
        let bufferwid=document.getElementById("bufferwid").value ;
        let wkt=document.getElementById("wkt").value ;
        let sdui={bufferwid:bufferwid, wkt:wkt };
        console.log(sdui);
        let dimensions={sdui:JSON.stringify(sdui)};
        wmtsSource.updateDimensions(dimensions);
    }

    </script>



</body>
</html>